<template>
	<view class="search-page page-container">
		<!-- 搜索框 -->
		<SearchBar @search="onSearch" :placeholder="`搜索 ${searchKeyword}`" :auto-navigate="false" />

		<!-- 搜索结果 -->
		<view class="search-results">
			<view class="result-header">
				<text class="result-count">找到 {{ recordCount }} 个相关商品</text>
			</view>

			<!-- 商品列表 -->
			<view class="product-list">
				<view class="product-item" v-for="(product, index) in searchResults" :key="index"
					@click="toProductDetail(product)">
					<image :src="$tools.buildUrl(product.white_back_ground_pic_url)" mode="aspectFill"
						class="product-image"></image>
					<view class="product-info">
						<text class="product-name">{{ product.spu_name }}</text>
						<text class="product-desc">{{ product.short_spu_name }}</text>
						<view class="product-footer">
							<text class="product-price">￥{{ product.price_min }}元/份</text>
							<button class="add-cart-btn" @click.stop="addToCart(product)">加入购物车</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="recordCount === 0 && hasSearched">
				<image src="@/static/images/empty-search.png" mode="aspectFit" class="empty-image"></image>
				<text class="empty-text">没有找到相关商品</text>
				<text class="empty-tip">试试其他关键词吧</text>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchBar from '@/components/SearchBar/SearchBar.vue'

	export default {
		components: {
			SearchBar
		},
		data() {
			return {
				searchKeyword: '',
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				searchResults: [],
			}
		},
		onLoad(options) {
			if (options.q) {
				this.searchKeyword = decodeURIComponent(options.q)
				this.onSearch(this.searchKeyword)
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.searchResults = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			onSearch(keyword) {
				this.searchKeyword = keyword
				this.page = 1
				this.recordCount = 0
				this.searchResults = []
				this.loadDataList()
			},
			loadDataList() {
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				this.$api.good.GetProductList({
					page: this.page,
					limit: this.limit,
					keyword: this.searchKeyword
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.searchResults = this.searchResults.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},
			toProductDetail(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				})
			},
			addToCart(product) {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-results {
		padding: 20rpx;
	}

	.result-header {
		padding: 20rpx 0;
	}

	.result-count {
		font-size: 28rpx;
		color: #666;
	}

	.product-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.product-item {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.product-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}

	.product-desc {
		font-size: 24rpx;
		color: #999;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}

	.product-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #52a58a;
	}

	.add-cart-btn {
		background: #52a58a;
		color: white;
		border: none;
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120rpx 40rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.empty-tip {
		font-size: 28rpx;
		color: #999;
	}
</style>